<template>
  <div class="container" v-if="$loadingRouteData">
    <p>loading...</p>
  </div>
  <div class="container" v-if="!$loadingRouteData">
    <div class="row">
      <breadcrumb :breadcrumbs="navItems"></breadcrumb>
    </div>
    <div class="row">
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="新增用户数" :box-content="reportData.news[0]">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">{{ reportData.news[1] }}</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-up"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="访问次数" :box-content="reportData.visited[0]">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">{{ reportData.visited[1] }}</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="播放时长" :box-content="reportData.durations[0]">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">{{ reportData.durations[1] }}</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
      <reactive-container :reactive="[3, 3, 6, 6]">
        <box box-title="总用户量" :box-content="reportData.users[0]">
          <small class="w-yesterday-profile clearfix">
            <label-text label-text="昨日"></label-text>
            <span class="w-secondary-value">{{ reportData.users[1] }}</span>
            <span class="w-secondary-value w-rais-percent">
              60%<icon-font class="w-rais-percent-icon" font="level-down"></icon-font>
            </span>
          </small>
        </box>
      </reactive-container>
    </div><!-- end row -->
    <div class="row">
      <reactive-container>
        <box box-title="分时">
          <div class="row" id="w-product-hours-panel">
            <reactive-container :reactive="[9]">
              <bar-chart :chart-adapter="hoursAdapter"></bar-chart>
            </reactive-container>
            <reactive-container :reactive="[2]">
              <div id="w-product-total">
                <div class="container-fluid">
                  <div class="row">
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">{{ reportData.totalVisited }}</h1>
                      <small>总访问量</small>
                    </reactive-container>
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">{{ reportData.totalDurations }}</h1>
                      <small>总访问时长(小时)</small>
                    </reactive-container>
                    <reactive-container :reactive="[12, 4, 4, 12]" no-padding>
                      <h1 class="w-total-value">{{ reportData.avgDurations }}</h1>
                      <small>日均时长(分钟)</small>
                    </reactive-container>
                  </div>
                </div>
              </div>
            </reactive-container>
          </div>
        </box>
      </reactive-container>
    </div><!-- end row -->
    <div class="row">
      <reactive-container>
        <box box-title="产品栏目">
          <table-view :table-adapter="categoryListAdapter"></table-view>
        </box>
      </reactive-container>
    </div>
  </div>
</template>

<script type="text/babel">
  import ReactiveContainer from './widgets/ReactiveContainer'
  import Box from './widgets/Box'
  import BarChart from './widgets/charts/BarChart'
  import LabelText from './widgets/LabelText'
  import IconFont from './widgets/IconFont'
  import TableView from './widgets/TableView'
  import Breadcrumb from './widgets/Breadcrumb'
  import Vue from 'vue'

  var CategoryLink = Vue.extend({
    template: '<a class="w-link" href="#" v-link="linkPath">{{ linkText }}</a>',
    props: {
      cellData: Object
    },
    computed: {
      linkPath: function () {
        var self = this
        return {
          name: 'category',
          params: {
            productId: self.cellData.product,
            categoryId: self.cellData.id
          }
        }
      },
      linkText: function () {
        return this.cellData.name
      }
    }
  })
  Vue.component('category-link', CategoryLink)

  var HoursAdapter = function () {
    var d = []
    for (var i = 0; i < 48; i++) {
      var h = parseInt(i / 2)
      var hour = h < 10 ? '0' + h : '' + h
      d.push({
        label: hour + (i % 2 ? ':30' : ':00'),
        value: parseInt(Math.random() * 100)
      })
    }
    this._series = d
  }
  HoursAdapter.prototype.seriesDatas = function () {
    return this._series
  }

  var CategoryAdapter = function () {
    var self = this
    self._headers = ['栏目名称', '今日新增', '昨日新增', '今日访问', '昨日访问', '今日播放次数', '昨日播放次数', '今日播放时长', '昨日播放时长', '累计用户数']
    self.sortedKeys = ['categoryName',
      'todayNews', 'yesterdayNews', 'todayVisited', 'yesterdayVisited',
      'todayPlayCount', 'yesterdayPlayCount', 'todayDurationCount', 'yesterdayDurationCount',
      'userCount']
    self.items = []

    self.header = (column, key) => self._headers[column]
    self.item = (row, column, item, key) => {
      if (key !== 'categoryName') {
        return item[key]
      } else {
        return {
          name: item[key],
          id: item.id,
          product: item.product
        }
      }
    }
    self.itemType = (row, column, key) => {
      if (key === 'categoryName') {
        return 'category-link'
      } else {
        return false
      }
    }
  }

  export default {
    components: {
      ReactiveContainer,
      Box,
      BarChart,
      LabelText,
      IconFont,
      TableView,
      Breadcrumb
    },
    route: {
      data: function (transition) {
        var self = this
        var productId = self.$route.params.productId
        self.$http.get('http://121.201.7.173:28084/api/ott/product/' + productId, {}, {
          emulateJSON: true
        }).then(function (response) {
          var responseData = response.data
          var responseResult = responseData.result
          self.reportData.news = responseResult.news
          self.reportData.visited = responseResult.visited
          self.reportData.durations = responseResult.durations
          self.reportData.users = responseResult.users
          self.reportData.totalVisited = responseResult.totalVisited
          self.reportData.totalDurations = responseResult.totalDurations
          self.reportData.avgDurations = responseResult.avgDurations

          var categories = responseResult.categories
          if (categories) {
            categories.forEach(function (item) {
              self.categoryListAdapter.items.push({
                id: item.id,
                product: productId,
                categoryName: item.name,
                todayNews: item.news[0],
                yesterdayNews: item.news[1],
                todayVisited: item.visited[0],
                yesterdayVisited: item.visited[1],
                todayPlayCount: item.playCount[0],
                yesterdayPlayCount: item.playCount[1],
                todayDurationCount: item.durations[0],
                yesterdayDurationCount: item.durations[1],
                userCount: item.users
              })
            })
          }
          transition.next()
        }, function (response) {
          transition.next()
        })
      },
      activate: function (transition) {
        console.log('product ==>')
        transition.next()
      },
      deactivate: function (transition) {
        console.log('product <==')
        transition.next()
      }
    },
    data: function () {
      return {
        hoursAdapter: new HoursAdapter(),
        categoryListAdapter: new CategoryAdapter(),
        productName: '',
        navItems: [],
        reportData: {
          news: ['0', '0'],
          visited: ['0', '0'],
          durations: ['0', '0'],
          users: ['0', '0'],
          totalVisited: '0',
          totalDurations: '0',
          avgDurations: '0'
        }
      }
    },
    ready: function () {
      var self = this
      self.navItems.push({
        text: '首页',
        route: {
          name: 'index'
        }
      })
      self.navItems.push({
        text: '产品',
        route: {}
      })
    }
  }
</script>

<style lang='less'>
  #w-product-hours-panel {
    padding-top: 14px;
  }
  #w-product-total {
    margin-top: 8px;
    margin-left: 15px;
  }
  .w-total-value {
    font-weight: lighter;
    margin: 0px;
  }
</style>
